<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-Link</title>
        <script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
        <style type="text/css">
            #app {
                height: 100vh;
                width: 100vw;
                display: inline-flex;
            }
            .item {
                position: absolute;
                height: 50%;
                width: 50%;
            }
            .top-left {
                top: 0px;
                left: 0px;
            }
            .top-right {
                top: 0px;
                right: 0px;
            }
            .bottom-left {
                bottom: 0px;
                left: 0px;
            }
            .bottom-right {
                bottom: 0px;
                right: 0px;
            }
            .control {
                position: absolute;
                z-index: 9999;
                background: #ffffff;
                top: 47.2vh;
                left: 47.5vw;
                width: 5vw;
                height: 5vh;
                border-radius: 12px;
            }
            .active {
                background: #41b883;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="item top-left">
                <mapgis-web-scene
                    lib-path="./static/libs/cdn/cesium/Cesium.js"
                    plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
                >
                    <mapgis-3d-raster-layer :base-url="url1"> </mapgis-3d-raster-layer>
                    <mapgis-3d-link :enable="link"></mapgis-3d-link>
                </mapgis-web-scene>
            </div>
            <div class="item top-right">
                <mapgis-web-scene
                    lib-path="./static/libs/cdn/cesium/Cesium.js"
                    plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
                >
                    <mapgis-3d-raster-layer :base-url="url2"> </mapgis-3d-raster-layer>
                    <mapgis-3d-link :enable="link"></mapgis-3d-link>
                </mapgis-web-scene>
            </div>
            <div class="item bottom-left">
                <mapgis-web-scene
                    lib-path="./static/libs/cdn/cesium/Cesium.js"
                    plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
                >
                    <mapgis-3d-raster-layer :base-url="url3"> </mapgis-3d-raster-layer>
                </mapgis-web-scene>
            </div>
            <div class="item bottom-right">
                <mapgis-web-scene
                    lib-path="./static/libs/cdn/cesium/Cesium.js"
                    plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
                >
                    <mapgis-3d-raster-layer :base-url="url4"> </mapgis-3d-raster-layer>
                </mapgis-web-scene>
            </div>
            <div :class="{'control': true, active: link}" v-on:click="changeMode"></div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        link: true,
                        url1: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
                        url2: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        url3: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}',
                        url4: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
                    };
                },
                methods: {
                    handleLoad(e) {
                        console.log('地图加初始化完毕！', e);
                    },
                    changeMode() {
                        this.link = !this.link;
                    }
                }
            });
        </script>
    </body>
</html>
